<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="admin/css/pintuer.css">
<link rel="stylesheet" href="admin/css/admin.css">
<script src="admin/js/jquery.js"></script>
<script src="admin/js/pintuer.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckfinder/ckfinder.js"></script>
<script src="ckeditor/samples/js/sample.js" type="text/javascript"></script>
<link href="ckeditor/samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
	$("#url3").change(function(){
		//图片预览方法
		var objUrl = null;
		var filepath = $("#url3").val();
		objUrl = getObjectURL(this.files[0]) ;
		if(filepath == null){
			alert("您的文件不正确，请重新选择");
			return;
		}
		var filetype = filepath.substring(filepath.lastIndexOf(".")+1);
		if (objUrl) {
			if(filetype.indexOf("jpg")>=0 ||filetype.indexOf("png")>= 0 || filetype.indexOf("bmp")>= 0
					|| filetype.indexOf("jpeg")>= 0 || filetype.indexOf("gif")>= 0 || filetype.indexOf("ico")>= 0){
				$("#showImg").attr("src", objUrl) ;
			}else{
					alert("不支持该文件类型，请重新选择文件");
					return;
				}
		}
	});
	$('#unews_form').bind('submit',function(){
		var formData = new FormData();
		var file = $("#url3")[0].files[0];
		var id = $('input[name="id"]').val();
		var title = $('input[name="title"]').val();
		var addOrUpdate = $('input[name="addOrUpdate"]').val();
		var content = CKEDITOR.instances.TextArea1.getData();
		if(file != null){
			formData.append('file',file);
		}
		formData.append('id',id);
		formData.append('title',title);
		formData.append('addOrUpdate',addOrUpdate);
		formData.append('content',content);
		$.ajax({
			url:'admin/addOrUpdatePrice.do',
			type:'post',
			data:formData,
			dataType:'text',
			cache: false,  
	        contentType: false,  
	        processData: false,
			success:function(strValue){
				if(strValue.length > 0){
					alert(strValue);
					clearData();
// 					window.location.reload();
					window.location.href="admin/prices.do";
				}
			}
		});
		return false;
});
});
//删除轮播图
function del(id){
	if(confirm("确定删除id为"+id+"的价目信息？")){
		$.ajax({url:'admin/delPrice.do?id='+id,context: document.body,success:function(data){
			alert(data);
			window.location.reload();
		}})
	}
}
//填充表单
function fillform(id,title,count,resource){
	$('#ab').text('修改产品');
	$('input[name="id"]').val(id);
	$('input[name="title"]').val(title);
	$('input[name="addOrUpdate"]').val("1");
	var content = $('#contentdiv'+count).html();
	CKEDITOR.instances.TextArea1.setData(content);
	$('#showImg').attr('src',resource);
}

//建立一个可存取到该文件的URL
function getObjectURL(file) {
	var url = null ; 
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}

function clearData(){
	$('#ab').text('添加产品信息');
	$('input[name="id"]').val('');
	$('input[name="title"]').val('');
	$('#url3').attr("src",'');
	$('input[name="addOrUpdate"]').val("0");
	$('#showImg').attr("src",'');
	$('textarea[name="content"]').val('');
	$("select:first option:first").attr("selected","selected");
	$("select:second option:first").attr("selected",true);
}
</script> 
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 价目列表</strong></div>
  <div class="padding border-bottom">  
  <button type="button" class="button border-yellow" onclick="document.getElementById('add').scrollIntoView();"><span class="icon-plus-square-o"></span> 添加内容</button>
  </div>
  <table class="table table-hover text-center">
    <tr>
      <th width="1%">ID</th>
      <th width="10%">标题</th>
      <th width="20%">封面</th>
      <th width="30%">产品介绍</th>
      <th width="15%">操作</th>
    </tr>
   	<c:if test="${!empty price }">
   		<c:forEach items="${price }" var="p" varStatus="a">
   			<tr>
      			<td>${p.id }</td>     
      			<td>${p.title }</td>     
      			<td><img src="${p.resource }" width="120" height="50"/></td>     
      			<td>
      				图文内容，点击修改查看详细信息
      			<div id="contentdiv${a.count }" style="display: none;">${p.content }</div>
      			</td>
      			<td><div class="button-group">
      			<a class="button border-main" href="javascript:void(0)" onclick="fillform('${p.id}','${p.title }','${a.count }','${p.resource }')"><span class="icon-edit"></span> 修改</a>
      			<a class="button border-red" href="javascript:void(0)" onclick="del(${p.id})"><span class="icon-trash-o"></span> 删除</a>
      			</div></td>
    		</tr>
   		</c:forEach>
   	</c:if>
    
  </table>
</div>
<div class="panel admin-panel margin-top" id="add">
  <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> <b id="ab">添加产品信息</b></strong></div>
  <div class="body-content">
    <form id="unews_form" method="post" class="form-x"> 
      <input type="hidden" name="id" value="0"/>
      <input type="hidden" name="addOrUpdate" value="0"/>
      <div class="form-group">
        <div class="label">
          <label>产品标题：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="title" value="" data-validate="required:请输入标题" />         
          <div class="tips"></div>
        </div>
      </div>
      <div class="form-group" id = "imgfmdiv">
        <div class="label">
          <label>封面图片：</label>
        </div>
        <div class="field">
          <input type="file" id="url3" name="file" class="input tips" style="width:25%; float:left;"  data-place="right" />
        </div>
      </div>
      <div class="form-group" id = "showImgdiv">
        <div class="label">
          <label>图片预览：</label>
        </div>
        	<img id="showImg" src="" width="240" height="100"/>
      </div>
      <div class="form-group">
        <div class="label">
          <label>产品介绍：</label>
        </div>
        <div class="field">
<!--           <textarea class="input" name="content" style="height:120px;"></textarea> -->
          <textarea class="ckeditor" name="content" id="TextArea1" cols="8" rows="2"></textarea>
          <script type="text/javascript">
          	CKEDITOR.replace('TextArea1');
          	
          </script>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <input class="button bg-main icon-check-square-o" type="submit" value="提交"/>
        </div>
      </div>
    </form>
  </div>
</div>
</body></html>